<template>
  <div class="topics">
    <!--
    动态路由虽然路由地址发生了变化 但是其实本质上是同一个页面 所以动态路由并不会重新出发生命周期 所以页面不会重新加载
    
    -->
    <ul>
        <li @click="goDetail(item.id)" v-for="item in topics" :key="item.id">
            <div class="left">
                <img :src="item.author.avatar_url" alt="">
                <span class="type" :class="item.top ? 'top': ''">{{item.top ? '置顶' : item.tab == "share" ? '分享' : item.tab == 'ask' ? '问答' : item.tab == "good" ? '精华': item.tab == 'job' ? '招聘' : ''}}</span>
                <div>
                    <p>{{item.title}}</p>
                    <span class="visit_reply"><i>{{item.reply_count}}</i>/{{item.visit_count}}</span>
                </div>
            </div>
            <span class="createTime">{{timeFormate(item.last_reply_at)}}</span>
        </li>
    </ul>
 </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ref, reactive } from 'vue'
export default {
    setup() {
        let route = useRoute()
        let router = useRouter()
        // console.log(route.params.tab); 路由动态参数
        const topics = ref([])

        // 请求列表数据
        axios.get('https://cnodejs.org/api/v1/topics?tab=' + route.params.tab).then(res => {
            // console.log(res);
            topics.value = res.data.data
        })

        // 跳转进入详情页面的方法
        function goDetail(id) {
            // console.log(id);
            router.push({
                path: '/detail',
                query: {
                    id
                }
            })
        }

        return {
            topics,
            goDetail
        }
        
    }
}
</script>

<style scoped lang="scss">
p {
    margin: 0;
}
.topics {
    height: calc(100% - 50px);
    overflow: auto;
}
ul {
    padding: 0 5px;
    li {
        display: flex;
        padding: 0 5px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        align-items: center;
        justify-content: space-between;
        img {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            position: relative;
            top: 10px;
        }
        .left {
            display: flex;
            align-items: baseline;
            
        }
        .type {
            min-width: 30px;
            flex-shrink: 0;
            text-align: center;
            font-size: 12px;
            margin: 0 5px;
            padding: 3px 6px;
            border-radius: 3px;
            background-color: #eee;
        }
        .top {
            background-color: #80bd01;
            color: #fff;
            font-weight: bold;
            
        }
        p {
            font-size: 14px;
            color: #333;
            width: 220px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .visit_reply {
            font-size: 12px;
            color: #ccc;
            i {
                font-style: normal;
                color: #777;
            }
        }
        .createTime {
            font-size: 12px;
            color: #777;
        }
    }
}
</style>